<!--
  功能：功能描述
  作者：Skindy
  时间：2024年02月19日 14:22:36
-->
<template>
  <div style="text-align: center">
    <el-radio-group v-model="category" size="medium">
      <el-radio-button label="日降水"></el-radio-button>
      <el-radio-button label="相对湿度"></el-radio-button>
      <el-radio-button label="温度"></el-radio-button>
      <!-- <el-radio-button label="深圳"></el-radio-button> -->
    </el-radio-group>
    <h3 style="text-align: center;margin-top:20px">{{ charttitle }}
    </h3>

    <div ref="echarts" style="width: 80%;min-width:850px; height:80%;min-height:400px;margin:0 auto;"></div>

  </div>
</template>

<script>
// import echarts from 'echarts';
const echarts = require('echarts');
export default {
  data() {
    return {
      myChart: null,
      option: {},
      labelOption: {
        show: true,
        position: 'insideBottom',
        distance: 30,
        align: 'center', // 将 align 设置为 'center' 来实现水平居中对齐
        verticalAlign: 'middle',
        rotate: 90,
        // rotate: 0,
        // formatter: '{c}  {name|{a}}',
        formatter: '{c}',
        fontSize: 13,
        rich: {
          name: {}
        },

      },
      visible: false,
      charttitle: "1-3天日降水预报TS评分统计图",
      YaxisLabel: "TS评分",
      category: "日降水",
      // rhdata:null,
      // rain24data:null,
      // tmpdata:null,
      rhdatas: {
        ecdata: [7.050, 7.226, 7.502, 8.499, 8.052, 9.224, 7.613, 7.631, 7.528, 7.620, 7.930, 9.000, 8.792],
        gfsdata: [11.200, 9.483, 8.934, 10.031, 16.063, 14.516, 9.535, 14.821, 13.841, 12.704, 13.836, 11.536, 9.534],
        modedata: [6.125, 6.006, 6.453, 7.256, 6.995, 7.523, 5.923, 6.523, 6.693, 5.935, 6.953, 7.536, 7.356],
      },
      tmpdatas: {
        ecdata: [1.464, 1.785, 1.978, 1.951, 1.869, 2.221, 1.845, 2.245, 1.973, 2.380, 2.149, 2.339, 2.307],
        gfsdata: [1.191, 2.455, 1.494, 2.391, 1.758, 2.719, 1.468, 2.398, 1.766, 2.876, 1.663, 2.669, 2.670],
        modedata: [1.012, 1.998, 1.351, 2.081, 1.553, 2.115, 1.216, 1.715, 1.335, 2.112, 1.335, 1.928, 2.101],
      },
      rain24datas: {
        ecdata: [0.485, 0.426, 0.387, 0.323, 0.251],
        gfsdata: [0.473, 0.411, 0.392, 0.321, 0.248],
        modedata: [0.535, 0.502, 0.452, 0.391, 0.33],
      },
      rain24Axis: ['24h', '36h', '48h', '60h', '72h'],
      rhtmpAxis: ['00h', '06h', '12h', '18h', '24h', '30h', '36h', '42h', '48h', '54h', '60h', '66h', '72h'],
      chartsAxis: [],
      chartsdatas: {},
    };
  },
  mounted() {
    // this.$nextTick(() => {
    // console.log('this.$refs.echarts:', this.$refs.echarts);
    this.chartsAxis = this.rain24Axis
    this.chartsdatas = this.rain24datas
    this.initChart();
    // });
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.echarts);
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['ECMWF_HR', 'GRAPES_GFS', '集合预报']
          // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            name: '预报时间',
            // data: this.chartsxAxis
            data: this.chartsAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.YaxisLabel,

          }
        ],
        series: [
          {
            name: 'ECMWF_HR',
            type: 'bar',
            barGap: 0,
            label: this.labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.chartsdatas.ecdata
          },
          {
            name: 'GRAPES_GFS',
            type: 'bar',
            label: this.labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.chartsdatas.gfsdata
          },
          {
            name: '集合预报',
            type: 'bar',
            label: this.labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.chartsdatas.modedata
          },
          // {
          //   name: 'Wetland',
          //   type: 'bar',
          //   label: this.labelOption,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [98, 77, 101, 99, 40]
          // }
        ]
      };
      this.myChart.setOption(this.option);
    }
  },
  watch: {
    category(newcategory, oldcategory) {
      if (newcategory == "日降水") {
        this.charttitle = "1-3天日降水预报TS评分统计图"
        this.chartsAxis = this.rain24Axis
        this.chartsdatas = this.rain24datas
        this.YaxisLabel = "TS评分"
        this.initChart();

      } else if (newcategory == "相对湿度") {
        this.charttitle = "0-3天湿度预报误差统计图"
        this.chartsAxis = this.rhtmpAxis
        this.chartsdatas = this.rhdatas
        this.YaxisLabel = "误差"

        this.initChart();

      } else if (newcategory == "温度") {
        this.charttitle = "0-3天地面温度预报误差统计图"
        this.chartsAxis = this.rhtmpAxis
        this.chartsdatas = this.tmpdatas
        this.YaxisLabel = "误差"

        this.initChart();

      }
    }
  }
};
</script>

<style scoped>
/* 可以添加样式 */
</style>
